
.M-btn{
  outline: 0;
  display: inline-block;
  margin: 5px;
  font-weight: 500;
  text-align: center;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  white-space: nowrap;
  line-height: 1.5;
  padding: $baseSize*0.25 $baseSize;
  font-size: $baseSize*0.75;
  border-radius: 6px;
  user-select: none;
  transition: all .3s cubic-bezier(.645,.045,.355,1);
  transform: translateZ(0);
  color: #666;
  @include showbackgroundColor(#f7f7f7);
  @include showborderColor(#d9d9d9);
  &:hover{
    outline: 0;
    color: #57c5f7;
    @include showbackgroundColor(#fff);
    @include showborderColor(#57c5f7);
  }
  &:before{
    position: absolute;
    top: -1px;
    left: -1px;
    bottom: -1px;
    right: -1px;
    background: #fff;
    opacity: .35;
    content: '';
    border-radius: inherit;
    z-index: 1;
    transition: opacity .2s;
    pointer-events: none;
    display: none;
  }
  &:active{
    box-shadow:0 0 16px #57c5f7;
  }

}
.M-btn-primary{
  color: #fff;
  @include showbackgroundColor(#2db7f5);
  @include showborderColor(#2db7f5);
  &:hover{
    color: #fff;
    @include showbackgroundColor(#57c5f7);
    @include showborderColor(#57c5f7);
  }
  &:active{
    color: #fff;
    @include showbackgroundColor(#2db7f5);
    @include showborderColor(#2db7f5);
  }
}
.M-btn-ghost{
    color: #666;
    @include showbackgroundColor();
    @include showborderColor(#d9d9d9);
    &:hover {
      color: #57c5f7;
      @include showbackgroundColor();
      @include showborderColor(#57c5f7);
    }
}
.M-btn-dashed{
    color: #666;
    @include showbackgroundColor()
    @include showborderColor(#d9d9d9);
    border-style: dashed;
}
.M-btn-sm{
  padding: 1px 7px;
  font-size: $baseSize*0.75;
  border-radius: $baseSize*0.25;
}
.M-btn-lg{
  padding: 4px 15px 5px;
  font-size: $baseSize*0.875;
  border-radius: $baseSize*0.375;
}
// MButton Group
.M-btn-group{
  display: inline-block;
  vertical-align: middle;
  position: relative;
  .M-btn:hover{
    z-index: 2;
  }
  /*.M-btn+.M-btn {
    margin-left: -1px;
  }*/
  .M-btn:first-child{
    margin-left: 0;
  }
  .M-btn:first-child:not(:last-child) {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
    padding-right: 8px;
  }
  .M-btn:last-child:not(:first-child) {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    padding-left: 8px;
  }
  .M-btn:not(:first-child):not(:last-child){
    border-radius: 0;
  }
  .M-btn-primary:first-child:not(:last-child) {
    border-right-color: #2baee9;
  }
  .M-btn-group .M-btn-primary+.M-btn, .M-btn-group .M-btn-primary:last-child:not(:first-child) {
    border-left-color: #2baee9;
  }
}

/*
* animate
*/

.M-btn:active{
  animation: MBtnClicked 0.2s;
}
@keyframes MBtnClicked{
  100%{
    box-shadow:0 0 26px #57c5f7;
  }
}
